"use client";
import { useState } from "react";
import PrimaryList from "./components/PrimaryList";
import LabelList from "./components/LabelList";
import "./index.css";
import { Divider } from "antd";

interface CategoryListProps {
    onChangeLabel: (ids: {
        primaryId: string;
        categoryId: string;
        labelId: string;
    }) => void;
}

export default function CategoryList({ onChangeLabel }: CategoryListProps) {
    const [selectValue, setSelectValue] = useState({
        primaryId: "",
        categoryId: "",
        labelId: "",
    });

    const changePrimaryId = (primaryId: string) => {
        setSelectValue({
            ...selectValue,
            primaryId,
        });
    };

    const changeLabel = (ids: string) => {
        const [categoryId, labelId] = ids.split("_");
        const values = {
            ...selectValue,
            categoryId,
            labelId,
        };
        setSelectValue(values);
        onChangeLabel(values);
    };

    return (
        <div className="category-container">
            <div className="category-content">
                <PrimaryList changePrimaryId={changePrimaryId} />
                <Divider />
                <LabelList
                    primaryId={selectValue.primaryId}
                    changeLabel={changeLabel}
                />
            </div>
        </div>
    );
}
